import { reactive } from 'vue';
import { useDebounceFn } from '@vueuse/core';
import { DICT } from '/@/enums/dict';
import { UpdateTypeList, updateTypeMap } from '/@/enums/modelEnum';
import { getDictTypeListApi } from '/@/api/admin/dict';
import { EditColumn } from '/@/components/HEditTable';
import { ComponentTypeEnum } from '/@/components/ModelTable/index';

import { FormSchema } from '/@/components/Table';
import { getTableModelTypeTreeApi, getDBTableNamesApi } from '/@/api/config-center/model-design';
import { getMenuTree } from '/@/api/admin/menu';
import { getDBListApi } from '/@/api/database/account';
import { MODE } from '/@/components/CodeEditor';
import { isNullOrUnDef } from '/@/utils/is';

export const basicSchemaFn: FormSchema[] = [
  {
    field: 'modelName',
    label: '模型名称',
    required: true,
    component: 'Input',
    componentProps: {
      placeholder: '请输入模型名称',
    },
  },

  {
    field: 'typeId',
    label: '所属分类',
    required: true,
    component: 'ApiTreeSelect',
    componentProps: {
      placeholder: '请选择所属分类',
      api: getTableModelTypeTreeApi,
    },
  },
  {
    field: 'modules',
    label: '所属模块',
    component: 'ApiTreeSelect',
    componentProps: {
      placeholder: '请选择所属模块',
      multiple: true,
      labelField: 'name',
      valueField: 'id',
      api: getMenuTree,
    },
  },
  {
    field: 'modelCode',
    dynamicDisabled: true,
    ifShow: false,
    label: '模型编码',
    component: 'Input',
    componentProps: {
      placeholder: '请输入模型编码',
    },
  },
];
const tableCodeParams = reactive({ tableCode: '', dataSource: '' });

export const dataSchema: FormSchema[] = [
  {
    field: 'dataSource',
    label: '数据库名',
    component: 'ApiSelect',
    required: true,
    componentProps: {
      api: async (params) => {
        const ret = await getDBListApi(params);
        ret.forEach((e) => {
          e.connName = `${e.connName} (${e.connCode})`;
        });
        return ret;
      },
      showSearch: true,
      filterOption: (input: string, option: any) => {
        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
      },
      allowClear: false,
      placeholder: '请选择数据库名',
      labelField: 'connName',
      valueField: 'connCode',
      getPopupContainer: () => document.body,
    },
    defaultValue: '__system__',
  },

  {
    required: true,
    field: 'tableCode',
    label: '表名',
    component: 'ApiSelect',
    componentProps: ({ formModel }) => {
      tableCodeParams.dataSource = formModel.dataSource;
      return {
        api: getDBTableNamesApi,
        showSearch: true,
        filterOption: false,
        labelField: 'name',
        valueField: 'name',
        resultField: 'records',
        placeholder: '请选择库表编码',
        params: tableCodeParams,
        onSearch: useDebounceFn((v) => {
          tableCodeParams.tableCode = v;
        }, 200),
        getPopupContainer: () => document.body,
      };
    },
  },

  {
    field: 'primaryKey',
    label: '库表主键',
    required: true,
    component: 'Input',
    componentProps: {
      placeholder: '请输入库表主键',
    },
  },

  {
    field: 'dataParam',
    label: '窗口参数',
    component: 'Input',
    componentProps: {
      placeholder: '请输入窗口参数',
    },
  },
  {
    field: 'dataTempParam',
    label: '临时参数',
    component: 'InputTextArea',
    componentProps: {
      rows: 9,
      placeholder: '请输入临时参数',
    },
    colProps: { lg: 24 },
  },

  {
    field: 'dataCondition',
    label: '限制条件',
    component: 'CodeEditor',
    componentProps: {
      class: 'h-52',
      mode: MODE.SQL,
    },
    colProps: { lg: 24 },
  },

  {
    field: 'comment',
    label: '注释',
    component: 'CodeEditor',
    componentProps: {
      class: 'h-52',
      mode: MODE.SQL,
    },
    colProps: { lg: 24 },
  },
];

export const dataFlowSchema: FormSchema[] = [
  {
    field: 'resourceCode',
    label: '资源编码',
    component: 'Input',
    componentProps: {
      placeholder: '请输入资源编码',
    },
  },
  {
    field: 'keepFields',
    label: '数据监听字段',
    component: 'Input',
    componentProps: {
      placeholder: '请输入数据监听字段',
    },
  },
  {
    field: 'trackCondition',
    label: '跟踪条件',
    component: 'CodeEditor',
    componentProps: {
      class: 'h-52',
      mode: MODE.SQL,
    },
    colProps: { lg: 24 },
  },
];

export const dataInfoColumns = async (): Promise<EditColumn[]> => {
  const res = await getDictTypeListApi({
    type: DICT.COMPONENT_TYPE,
  });
  const typeEnum = ComponentTypeEnum;

  res.forEach((el) => {
    el.value = el.intValue;
  });

  const componentsTypeList = res;

  const pcCmpType: EditColumn = {
    class: 'w-40',
    label: '组件类型',
    dataIndex: 'componentType',
    component: 'Select',
    defaultValue: 0,
    componentProps: ({ record }) => {
      return {
        style: 'width:100%',
        allowClear: false,
        options: componentsTypeList,
        onChange(v) {
          record.component = typeEnum[v] || 'Input';
          if (v === typeEnum.Hide) {
            if (isNullOrUnDef(record.formModelHiddenType)) {
              record.formModelHiddenType = 9;
            }
          }
        },
        getPopupContainer: () => document.body,
      };
    },
    format(v) {
      const info = componentsTypeList.find((el) => el.intValue === v);

      if (info) return info.label;
      return v;
    },
  };
  const forms: EditColumn[] = [
    {
      label: '标签名',
      dataIndex: 'label',
      component: 'Input',
      componentProps: {
        placeholder: '请输入标签名',
      },
    },
    {
      label: '标签名编码',
      dataIndex: 'field',
      component: 'Input',
      componentProps: {
        placeholder: '请输入标签名编码',
      },
    },
    pcCmpType,
    {
      label: '读写设置',
      class: 'w-55  ml-2',
      dataIndex: 'updateType',
      component: 'RadioGroup',
      defaultValue: 1,
      componentProps: {
        options: UpdateTypeList,
      },
      format(v) {
        return updateTypeMap[v];
      },
    },
    // {
    //   dataIndex: 'labelSpan',
    //   label: '标签宽度',
    //   component: 'Slider',
    //   defaultValue: 3,
    //   class: 'w-70 px-4',
    //   parentField: 'componentProps',
    //   componentProps: {
    //     max: 12,
    //     min: 0,
    //     marks: { 6: '6', 12: '12' },
    //   },
    // },
    // {
    //   dataIndex: 'colSpan',
    //   class: 'w-70 px-4',
    //   label: '行宽',
    //   component: 'Slider',
    //   parentField: 'componentProps',
    //   defaultValue: 23,
    //   componentProps: {
    //     max: 24,
    //     min: 0,
    //     marks: { 12: '12', 24: '24' },
    //   },
    // },
    {
      dataIndex: 'defaultValue',
      label: '初始值',
      component: 'Input',
      parentField: 'componentProps',
      componentProps: {
        showSearch: true,
        placeholder: '请输入初始值',
      },
    },
    {
      dataIndex: '',
      label: '操作',
      slot: 'action',
      class: 'w-20',
    },
  ];

  return forms;
};
